<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/dateFormat.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .commentBar {
      width: 600px;
      margin: 0 auto;
    }

    .commentBar .commentSendBox {
      margin-top: 50px;
    }

    .commentBar .commentSendBox textarea {
      width: 100%;
      height: 200px;
      resize: none;
      padding: 10px;
      box-sizing: border-box;
      outline: none;
    }

    .commentBar .commentSendBox .sendBox {
      display: flex;
      justify-content: space-between;
    }

    .commentListBox {
      margin-top: 50px;
      font-size: 12px;
      line-height: 18px;
    }

    .showComment li {
      padding: 10px;
    }

    .showComment li+li {
      border-top: 1px dashed #333;
    }

    .comment {
      text-indent: 10px;
    }

    .commentDetail {
      display: flex;
      text-indent: 10px;
    }

    .reply {
      margin-left: 50px;
    }

    .replyList {
      padding-left: 50px;
    }

    .replyList .comment-header {
      margin-top: 12px;
    }

    .comment-bottom {
      height: 80px;
      display: flex;
      margin-top: 20px;
      display: none;
    }

    .comment-bottom .replyCon {
      flex: 1;
      height: 80px;
      border-radius: 10px;
      margin-right: 10px;
      outline: none;
      padding: 10px;
      box-sizing: border-box;
      resize: none;
    }

    .comment-bottom .replyBtn {
      width: 80px;
      height: 80px;
      background-color: #00b5e5;
      border-radius: 10px;
      word-break: break-all;
      font-size: 24px;
      word-spacing: 10px;
      line-height: 40px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="commentBar">
    <div class="commentSendBox">
      <textarea name="" id="" cols="30" rows="10" class="commentCon"></textarea>
      <div class="sendBox">
        <div class="commentTips">您还可以输入50个字</div>
        <button class="commentSend">发送</button>
      </div>
    </div>
    <div class="commentListBox">
      <ul class="showComment">
        <!--  <li>
          留言
          <div class="comment-header">
            <div class="nick">PigZhang</div>
            <div class="comment">天对地，雨对风，黑心棉对白岩松</div>
            <div class="commentDetail">
              <div class="time">2021-05-16 18:03</div>
              <div class="reply">回复</div>
              <div class="deleteAll">删除</div>
            </div>
          </div>
          留言回复显示
          <div class="replyList">
            <div class="comment-header">
              <div class="nick">PigZhang: <span class="comment">天对地，雨对风，黑心棉对白岩松</span></div>
              <div class="commentDetail">
                <div class="time">2021-05-16 18:03</div>
                <div class="reply">回复</div>
              </div>
            </div>
            <div class="comment-header">
              <div class="nick">PigZhang: <span class="comment">天对地，雨对风，黑心棉对白岩松</span></div>
              <div class="commentDetail">
                <div class="time">2021-05-16 18:03</div>
                <div class="reply">回复</div>
              </div>
            </div>
            <div class="comment-header">
              <div class="nick">PigZhang: <span class="comment">天对地，雨对风，黑心棉对白岩松</span></div>
              <div class="commentDetail">
                <div class="time">2021-05-16 18:03</div>
                <div class="reply">回复</div>
                <div class="deleteOne">删除</div>
              </div>
            </div>
          </div>
          留言回复输入框
          <div class="comment-bottom">
            <textarea class="replyCon" name="" id="" cols="30" rows="10"></textarea>
            <a class="replyBtn" href="javascript:;">发表 评论</a>
          </div>
        </li> -->
      </ul>
    </div>
  </div>
</body>
<script>
  // 1.  评论框输入提示
  // a.  onkeypress 按下触发 此时内容还没有输入到文本框中 => 错位了一个 (在绑定一个onkeyup)
  // b.  评论框虽然做了计数 但是该超还会超 => (1) return false(阻止默认输入)
  // c.  中文输入法,悬浮在输入框之上, 此时内容依旧可以输入到框中  =>  只截取前50个字符,剩余的不要

  // 2. 点击发送 快捷键发送(ctrl+enter)
  // 3. 留言回复

  var commentCon = document.getElementsByClassName('commentCon')[0];
  var commentTips = document.getElementsByClassName('commentTips')[0];
  var commentSend = document.getElementsByClassName('commentSend')[0];

  var showComment = document.getElementsByClassName("showComment")[0];

  // 输入提示和快捷键发送
  commentCon.onkeypress = commentCon.onkeyup = commentInputHandler;

  // 点击发送
  commentSend.onclick = commentSendHandler;

  //回复留言
  showComment.onclick = function (e) {

    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className == 'reply') {



      var commentBottomList = showComment.getElementsByClassName('comment-bottom');

      for (var i = 0; i < commentBottomList.length; i++) {
        commentBottomList[i].style.display = "none";
        // console.log(commentBottomList[i]);
      }

      var parentLi = parent(parent(parent(target)));
      //reply  =>  commentDetail  =>  comment-header  => li
      //  子          父级                 父级            父级
      // console.log(parentLi);

      var commentBottom = parentLi.getElementsByClassName('comment-bottom')[0];
      // console.log(commentBottom);
      commentBottom.style.display = 'flex';
    } else if (target.className == 'replyBtn') {

      fn(target);

      //删除评论
    } else if (target.className == 'deleteAll') {
      var delAll = parent(parent(parent(target)))
      console.log(delAll);
      delAll.remove();

      //删除回复
    } else if (target.className == 'deleteOne') {
      var delOne = parent(parent(target))
      // console.log(delOne);
      delOne.remove();
    }

  }


  function commentInputHandler(e) {
    var con = this.value;
    console.log(con);

    var sum = 50;
    var num = sum - con.length - 1;
    commentTips.innerHTML = `您还可以输入${num}个字`
    if (num <= 0) {
      e.preventDefault();

      var str = con.subtr(0, 50)
      this.value = str;
    }

    var keyCode = e.which || e.keyCode;
    // console.log(e.key, keyCode);

    // 快捷键发送  (ctrl+enter)
    if (e.ctrlKey && keyCode == 13) {
      commentSendHandler();
    }
  }

  function commentSendHandler() {
    var comment = commentCon.value;
    if (comment) {
      var li = document.createElement('li');
      li.innerHTML = `<div class="comment-header">
                        <div class="nick">PigZhang</div>
                        <div class="comment">${comment}</div>
                        <div class="commentDetail">
                            <div class="time">${dateFormat("YYYY-MM-DD hh:mm")}</div>
                            <div class="reply">回复</div>
                            <div class="deleteAll">删除</div>
                        </div>
                    </div>
                    <div class="replyList"></div>
                    <div class="comment-bottom">
                        <textarea class="replyCon" name="" id="" cols="30" rows="10"></textarea>
                        <a class="replyBtn" href="javascript:;">发表 评论</a>
                    </div>`;

      // showComment.appendChild(li);

      showComment.prepend(li);
      commentCon.value = "";

      // 假禁止
      commentSend.disabled = true;
      commentCon.disabled = true;

      //倒计时
      var count = 3;
      commentTips.textContent = `距离下次输入还有${count}秒`;

      var timer = setInterval(function () {
        count--;
        commentTips.textContent = `距离下次输入还有${count}秒`;
        if (count <= 0) {
          clearInterval(timer);
          commentTips.innerHTML = `您还可以输入50个字`
          commentSend.disabled = false;
          commentCon.disabled = false;
        }

      }, 1000)
    }
  }

  function fn(target) {
    var replyConInp = prev(target);
    console.log(replyConInp);
    var replyCon = replyConInp.value;//获取回复框内容
    console.log(replyCon);

    var li = document.createElement('li')
    li.innerHTML = `<div class="comment-header">
              <div class="nick">PigZhang: <span class="comment">${replyCon}</span></div>
              <div class="commentDetail">
                <div class="time">${dateFormat("YYYY-MM-DD hh:mm")}</div>
                <div class="deleteOne">删除</div>
              </div>
            </div>`
    var commentBottom = parent(target);//获取回复框盒子
    var replyList = prev(commentBottom);
    console.log(replyList);
    replyList.prepend(li);

    // 回复完毕 
    // 清空回复框
    replyConInp.value = '';

    // 提交评论后隐藏回复盒子
    commentBottom.style.display = 'none';
  }

  function parent(ele) {
    return ele.parentElement || ele.parentNode;
  }

  function prev(ele) {
    return ele.previousElementSibling || ele.previousSibling;
  }

  function next(ele) {
    return ele.nextElementSibling || ele.nextSibling;
  }





</script>

</html>